<template>
  <view class="my-center-container">
    <!-- 自定义导航栏 -->
    <navigation-bar>
      <navigator
        style="position: absolute;top: 50%;transform: translateY(-50%);left: 20px;font-size: 16px;line-height: 16px;color: #000;"
        class="iconfont" hover-class="none" open-type="navigateBack">&#xe61a;</navigator>
      <view class="top-title-bar">
        Campus circle中心
      </view>
    </navigation-bar>
    <!-- 个人信息面板 -->
    <navigator url="/thirdpkg/center-detail/center-detail" class="center-info-panel" hover-class="none">
      <!-- 头像 -->
      <view class="avatar">
        <u-avatar src="/static/avatar.png" size="120rpx" mode="aspectFill"></u-avatar>
      </view>
      <!-- 信息 -->
      <view class="brief-info">
        <view class="name">
          暗裔 亚克托斯
        </view>
        <view class="id">
          @CCID7539210533
        </view>
      </view>
      <!-- 前往个人详情页 -->
      <view class="nav-ra-icon iconfont">
        &#xe624;
      </view>
    </navigator>
    <!-- 账号设置列表 -->
    <view class="profile-setting-menu">
      <view class="setting-list">
        <!-- 设置项 -->
        <navigator url="/thirdpkg/center-contact/center-contact?type=my" class="setting-item">
          <view class="item-icon iconfont">
            &#xe619;
          </view>
          <view class="item-con">
            您的联络方式
          </view>
        </navigator>
        <navigator url="/thirdpkg/center-change/center-change" class="setting-item">
          <view class="item-icon iconfont">
            &#xe608;
          </view>
          <view class="item-con">
            切换到别的圈子
          </view>
        </navigator>
        <view class="setting-item">
          <view class="item-icon iconfont">
            &#xe617;
          </view>
          <view class="item-con">
            加入我们的团队
          </view>
        </view>
        <view class="setting-item">
          <view class="item-icon iconfont">
            &#xe618;
          </view>
          <view class="item-con">
            意见投稿
          </view>
        </view>
        <view class="setting-item">
          <view class="item-icon iconfont">
            &#xe616;
          </view>
          <view class="item-con">
            圈子规范
          </view>
        </view>
        <view class="setting-item">
          <view class="item-icon iconfont">
            &#xe614;
          </view>
          <view class="item-con">
            圈子使用协议
          </view>
        </view>
        <view class="setting-item">
          <view class="item-icon iconfont">
            &#xe615;
          </view>
          <view class="item-con">
            隐私协议
          </view>
        </view>
        <view class="setting-item">
          <view class="item-icon iconfont">
            &#xe61c;
          </view>
          <view class="item-con">
            关于我们
          </view>
        </view>
      </view>
    </view>
    <!-- 协议条款 -->
    <view class="bottom-policy-tip">
      <view class="user-tip">
        用户协议
      </view>
      <i>·</i>
      <view class="serve-tip">
        服务条款
      </view>
    </view>
  </view>
</template>

<script>
  import naviHeightMix from "@/mixins/get-NavigationBar_Height.js"
  export default {
    mixins: [naviHeightMix],

    data() {
      return {

      };
    }
  }
</script>

<style lang="scss">
  .my-center-container {
    box-sizing: border-box;
    min-height: 100%;
    position: relative;
    padding-bottom: 120rpx;

    .top-title-bar {
      position: absolute;
      left: 60px;
      font-weight: 600;
    }

    .center-info-panel {
      width: 100%;
      height: 160rpx;
      display: flex;
      align-items: center;
      margin-top: 20rpx;

      .avatar {
        margin-left: 40rpx;
      }

      .brief-info {
        width: 60%;
        margin-left: 30rpx;

        .name {
          font-size: 34rpx;
        }

        .id {
          margin-top: 16rpx;
          color: #0191FF;
          font-size: 34rpx;
        }
      }

      .nav-ra-icon {
        color: #3D3D3D;
        font-size: 32rpx;
        line-height: 32rpx;
      }
    }

    .profile-setting-menu {
      margin-top: 60rpx;

      .setting-list {

        .setting-item {
          box-sizing: border-box;
          display: flex;
          align-items: center;
          height: 100rpx;
          padding-left: 40rpx;

          .item-icon {
            font-size: 32rpx;
            line-height: 32rpx;
          }

          .item-con {
            margin-left: 28rpx;
            font-size: 32rpx;
          }
        }
      }
    }

    .bottom-policy-tip {
      position: absolute;
      bottom: 40rpx;
      width: 100%;
      height: 40rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #0191FF;
    }
  }
</style>